<style lang="less" scoped>
@import "./view.less";
</style>
<template>
  <div class="page container detail">
    <div class="detail-content">
      <v-detail></v-detail>
    </div>
    <div class="detail-comment">
      <div class="comment">
        <v-comment
          :rows="6"
          :mentions="mentions"
          @preview="previewFn"
        />
      </div>
      <div class="comment-list">
        <v-menu
          class="comment-tabs"
          :selected-key="activedTabKey"
          :data-source="[
            { path: `/view/${id}`, name: '最热' },
            { path: `/view/${id}?key=new`, name: '最新' },
          ]"
        />
        <v-comment-list :data-source="commentData" :base="base" />
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Detail from '~/components/detail'
import Comment from '~/components/comment'
import CommentList from '~/components/comment/comment-list'
import Menu from '~/components/menu'

export default {
  components: {
    'v-detail': Detail,
    'v-comment': Comment,
    'v-menu': Menu,
    'v-comment-list': CommentList
  },
  data () {
    return {
      id: 1,
      liked: false,
      number: 10,
      tags: ['智源动态', '媒体报道', '报告会'],
      mentions: [{
        headUrl: '',
        name: 'pwkpwkpwkpwkpwkpwkpwkpwkpwk',
        dec: '前端前端前端前端前端前端前端'
      }, {
        headUrl: '',
        name: 'pwk2',
        dec: '前端2'
      }],
      content: '',
      commentData: [
        {
          like: 12,
          head: '',
          name: 'pwk',
          createDate: '2020/04/15 19:37:01',
          content: '看了两集非常棒！作者大大走心了哈哈~~',
          noname: false,
          reply: false,
          fold: false,
          replyList: [
            {
              like: 12,
              head: '',
              name: 'pwk',
              createDate: '2020/04/15 19:37:01',
              content: '看了两集非常棒！作者大大走心了哈哈~~',
              noname: false,
              reply: false,
              fold: false,
              replyList: [
                {
                  like: 12,
                  head: '',
                  name: 'pwk',
                  createDate: '2020/04/15 19:37:01',
                  content: '看了两集非常棒！作者大大走心了哈哈~~',
                  noname: false,
                  reply: false,
                  fold: false,
                },
                {
                  like: 12,
                  head: '',
                  name: 'pwk',
                  createDate: '2020/04/15 19:37:01',
                  content: '看了两集非常棒！作者大大走心了哈哈~~',
                  noname: false,
                  reply: false,
                  fold: false,
                }
              ]
            }
          ]
        },
        {
          like: 12,
          head: '',
          name: 'pwk',
          createDate: '2020/04/15 19:37:01',
          content: '看了两集非常棒！作者大大走心了哈哈~~',
          noname: false,
          reply: false,
          fold: false,
          replyList: [
            {
              like: 12,
              head: '',
              name: 'pwk',
              createDate: '2020/04/15 19:37:01',
              content: '看了两集非常棒！作者大大走心了哈哈~~',
              noname: false
            }
          ]
        }
      ],
      base: Object.freeze({
        like: 12,
        head: '',
        name: 'pwk',
        createDate: '2020/04/15 19:37:01',
        content: '看了两集非常棒！作者大大走心了哈哈~~',
        noname: false,
        reply: false,
        fold: false,
        replyList: []
      })
    }
  },
  computed: {
    ...mapState({

      activedTabKey () {
        return this.$route.fullPath
      },
    }),
  },
  created () {
    // console.log(this.$store.state)
  },
  methods: {
    previewFn (content) {
      this.commentData.unshift({
        ...this.base,
        content
      })
    },
    likedfn () {
      this.number++
      this.liked = true
    },
    onClickPopMenu (data) {
      console.log(data)
    },
    tabsChange (key) {
      console.log(key)
    }
  }
}
</script>
